/**
 * Created by Administrator on 2017/3/11.
 */
'use strict';


import React from 'react';

class SliderDots extends React.Component {
    handleDotClick(i) {
        var option = i - this.props.nowLocal;
        this.props.turn(option);
    }

    render() {
        let dotNodes = [];
        let { count, nowLocal } = this.props;
        for(let i = 0; i < count; i++) {
            dotNodes[i] = (
                <span key={'dot' + i}  className={"slider-dot" + (i === this.props.nowLocal?" slider-dot-selected":"")} onClick={this.handleDotClick.bind(this, i)}>{i+1}</span>
            );
        }
        return (
            <div className="slider-dots-wrap">
                {dotNodes}
            </div>
        );
    }
}
class SliderItem extends React.Component {
    render() {
        let { count, item } = this.props;
        return (
            <li className="slider-item">
                <img src={item.src} alt={item.alt} />
                <p className="des">{item.des}</p>
            </li>
        );
    }
}
class SliderContainer extends React.Component{
    render(){
        let items=this.props.items;
        let count=items.length;
        return(
            <div className="bd">
                <ul>
                    {
                        items.map(function (item) {
                            <SliderItem item={item}/>
                        })
                    }
                </ul>
            </div>
        )
    }
}
class SliderArrows extends React.Component {
    constructor(props) {
        super(props);
    }

    handleArrowClick(option) {
        this.props.turn(option);
    }

    render() {
        return (
            <div className="slider-arrows-wrap">
        <span
            className="slider-arrow slider-arrow-left"
            onClick={this.handleArrowClick.bind(this, -1)}>
        </span>
        <span
            className="slider-arrow slider-arrow-right"
            onClick={this.handleArrowClick.bind(this, 1)}>
        </span>
            </div>
        );
    }
}

export default class Slider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nowLocal: 0
        };
    }

    // 向前向后多少
    turn(n) {
        var _n = this.state.nowLocal + n;
        if(_n < 0) {
            _n = _n + this.props.items.length;
        }
        if(_n >= this.props.items.length) {
            _n = _n - this.props.items.length;
        }
        this.setState({nowLocal: _n});
    }

    // 开始自动轮播
    goPlay() {
        if(this.props.autoplay) {
            this.autoPlayFlag = setInterval(() => {
                this.turn(1);
            }, this.props.delay * 1000);
        }
    }

    // 暂停自动轮播
    pausePlay() {
        clearInterval(this.autoPlayFlag);
    }

    componentDidMount() {
        this.goPlay();
    }

    render() {
        let count = this.props.items.length;

        let itemNodes = this.props.items.map((item, idx) => {
            return <SliderItem item={item} count={count} key={'item' + idx} />;
        });

        let arrowsNode = <SliderArrows turn={this.turn.bind(this)}/>;

        let dotsNode = <SliderDots turn={this.turn.bind(this)} count={count} nowLocal={this.state.nowLocal} />;

        return (
            <div
                className="slider"
                onMouseOver={this.props.pause?this.pausePlay.bind(this):null} onMouseOut={this.props.pause?this.goPlay.bind(this):null}>
                <ul style={{
            left: -100 * this.state.nowLocal + "%",
            transitionDuration: this.props.speed + "s",
            width: this.props.items.length * 100 + "%"
        }}>
                    {itemNodes}
                </ul>
                {this.props.arrows?arrowsNode:null}
                {this.props.dots?dotsNode:null}
            </div>
        );
    }
}

Slider.defaultProps = {
    speed: 1,
    delay: 2,
    pause: true,
    autoplay: true,
    dots: true,
    arrows: true,
    items: []
};
Slider.autoPlayFlag = null;